“Nest, by Bonfire” Plugin Documentation by “Bonfire Themes”

"Nest, by Bonfire"

By: Bonfire Themes

Thank you for purchasing the Nest plugin. This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!

Table of Contents

  1. Installation
  2. Intro
  3. Set up a site-wide fly-out
  4. Set up a per-post or per-page fly-out
  5. Customization
  6. Using a button shortcode to trigger a fly-out panel
  7. Using a custom element to trigger a fly-out panel
  8. Have a question?

Installation - top

Installing the plugin couldn't be simpler.

  1. In your WordPress installation, go to Plugins > Add New
  2. Click on Upload
  3. Use the form there to upload the nest-by-bonfire.zip file
  4. On the next screen, activate the plugin.

Once you've activated the plugin, you need to create and select the page(s) that will be shown inside the fly-out(s). Read the next steps for instructions on how to go about that.

Intro - top

To make the entire process of creating a fly-out panel short and punchy, there are just two main things to remember:

  1. Create a page
  2. Select the created page as either the site-wide or per-post/page fly-out panel

That's it! The below points will go through both the site-wide and per-page/post options step-by-step, so even novice WordPress users will find their way quickly.

Here we go!

Set up a site-wide fly-out - top

'Nest' uses a simple WordPress page to display content on its fly-out panels. In order to setup a site-wide fly-out panel, all you need to do is:

  1. In your WordPress installation, head to Pages > Add New
  2. Give it a title you can remember. For this example, let's just name it "NEST SITE-WIDE". You can also place random text and maybe an image into the content area, just for show. Then save the page.
  3. To display the contents of this page in the site-wide fly-out panel, open the WordPress Live Customizer. Head to Appearance > Customize > Nest Plugin > Main Settings and select the "NEST SITE-WIDE" page in the "Select page to show in site-wide fly-out" drop-down.

After you've selected the page from the drop-down, the Live Customizer will refresh the page and display the activation button in the top-left corner. Click it to open the fly-out panel. It's as simple as that! Please note that the fly-out won't be shown on your site until you hit the "Save & Publish" button.

If you wish to hide the site-wide panel, simply select the default "— Select —" option and hit the "Save & Publish" button.

To explain it a bit further, what you just did is set up the site-wide fly-out panel. You can also setup per-post and per-page panels which will automatically override the site-wide panel. More on that in the next step.

Set up a per-post or per-page fly-out - top

If you want to create a per-post or per-page fly-out, follow these steps:

  1. Like in the site-wide fly-out, first create a page (Pages > Add New). Let's call it "NEST SINGLE" for this example's sake. And then add some content to the page; text, image, video, whatever. Then save.
  2. Now navigate to the editing page of the post or page you wish to add the fly-out panel to. On the edit page, find the "Nest Plugin: Per-Post" or "Nest Plugin: Per-Page" metabox (depending whether you're adding the fly-out to a post or page). If you can't see the metabox, click "Screen Options" in the top-right corner and make sure it's selected there.
  3. Again similarly to what you did with the site-wide slide, select the "NEST SINGLE" page in the "Select page to show in fly-out"

Once done, save the post/page like you normally would and go check it out!

Customization - top

As you probably already noticed, the customization of the fly-out panels is handled in the same locations as where you select which page to display as the fly-out.

There are quite a few options you can change so please grab a cup coffee, tea, or whatever your poison, and go over them one by one to see what's possible. Try different things, experiment, see what you can come up with :)

Using a button shortcode to trigger a fly-out panel - top

Sometimes you may want to place the activation button inside a post, page, or even into your theme's widget area; in those occasions you can use the included button shortcodes. Just enter one of the following lines of code (depending on the button style you want) where you'd like the button to appear:

[nestbutton]BUTTON TEXT HERE[/nestbutton]

[nestbuttontwo]BUTTON TEXT HERE[/nestbuttontwo]

[nestbuttonthree]BUTTON TEXT HERE[/nestbuttonthree]

[nestbuttonfour]BUTTON TEXT HERE[/nestbuttonfour]

Using a custom element to trigger a fly-out panel - top

If you'd like to use a custom element to trigger a Nest fly-out panel, you need only to give the element the "nest-custom-activator" class. This is more of an advanced feature and you're expected to know what you're doing but as a quick example anyone can do, try this: Simply copy-paste the following into the WordPress editor's 'text/HTML' view: <span class="nest-custom-activator">TRIGGER TEXT</span>

Afterwards, the words "TRIGGER TEXT" will activate the Nest slide on that post/page.

Alternatively, if you're comfortable with making such changes on your site and have the know-how, adding the same class to a custom button for example will have the same result. Meaning you can use any link or object to trigger Nest just by giving it the nest-custom-activator class.

Have a question? - top

Should you find something unclear about this documentation and have a question, then you can easily reach us through our CodeCanyon profile here (use the bottom-right contact form): http://codecanyon.net/user/BonfireThemes

Go To Table of Contents